<template>
  <div>
    <div style="font-size:30px;font-weight:bold;margin-bottom:15px">欢迎进入家教管理系统</div>


    <div style="display: flex">
      <div style="flex:1">
            <el-collapse v-model="activeName" accordion>
            <el-collapse-item v-for="item in data" :title="item.name" :name="item.id">
              <div style="padding: 0 20px">{{item.content}}</div>
              
            </el-collapse-item>
            
          </el-collapse>
      </div>

      <div style="flex:1;margin-left:50px">
          <div id="bie" style="width:100%;height:400px"></div>
      </div>
    </div>

    <div style="display: flex">
      <div style="flex:1;margin-top:20px">
        <div id="bar" style="width:100%;height:400px"></div>
     </div>

     <div style="flex:1;margin-top:20px">
        <div id="line" style="width:100%;height:400px"></div>
     </div>
    </div>


     <!-- <div style="font-size:30px;font-weight:bold;margin-bottom:15px">欢迎进入家教管理系统</div>

     <div style="width:50%">
          <el-collapse v-model="activeName" accordion>
          <el-collapse-item v-for="item in data" :title="item.name" :name="item.id">
            <div>{{item.content}}</div>
            
          </el-collapse-item>
          
        </el-collapse>
     </div>

     <div style="width:50%;margin-top:20px">
        <div id="bie" style="width:100%;height:400px"></div>
     </div>

     <div style="width:50%;margin-top:20px">
        <div id="bar" style="width:100%;height:400px"></div>
     </div>

     <div style="width:50%;margin-top:20px">
        <div id="line" style="width:100%;height:400px"></div>
     </div> -->
    
  </div>
</template>

<script>
import request from '@/utils/request'
import * as echarts from "echarts"

export default {
  name: 'HomeView',

  data () {
    return {
      activeName: '1',
      data:[]
    }
  },
  mounted() {
    this.findNotice()
    this.initEcharts()
    //this.initBar()
  },
  methods: {
    findNotice(){
      request.get("/notice").then(res=>{
        if(res.code === '0'){
          this.data = res.data
          this.activeName = this.data[0].id
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    initEcharts(){
      request.get("/book/echarts/bie").then(res =>{
        if(res.code === '0'){
          //开始去渲染数据了
          this.initBie(res.data)
        }else{
          this.$message.error(res.msg)
        }
      })
      request.get("/book/echarts/bar").then(res =>{
        if(res.code === '0'){
          //开始去渲染柱状图了
          let map = res.data
          this.initBar(map.xAxis,map.yAxis)
          this.initLine(map.xAxis,map.yAxis)
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    initBie(data){
                let chartDom = document.getElementById('bie');
                let myChart = echarts.init(chartDom);
                let option;

                option = {
                  title: {
                    text: '图书统计（饼图）',
                    subtext: '统计维度：图书分类',
                    left: 'center'
                  },
                  tooltip: {
                    trigger: 'item'
                  },
                  legend: {
                    orient: 'vertical',
                    left: 'left'
                  },
                  series: [
                    {
                      name: '分类',
                      type: 'pie',
                      radius: '50%',
                      data: data,
                      emphasis: {
                        itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                      }
                    }
                  ]
                };

                option && myChart.setOption(option);
    },
    initBar(xAxis,yAxis){
          let chartDom = document.getElementById('bar');
          let myChart = echarts.init(chartDom);
          let option;

          option = {
            title: {
              text: '图书统计（柱状图）',
              subtext: '统计维度：图书分类',
              left: 'center'
            },
            xAxis: {
              type: 'category',
              data: xAxis
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: yAxis,
                type: 'bar'
              }
            ]
          };

          option && myChart.setOption(option);
     },
     initLine(xAxis,yAxis){
              let chartDom = document.getElementById('line');
              let myChart = echarts.init(chartDom);
              let option;

              option = {
                title: {
                  text: '图书统计（折线图）',
                  subtext: '统计维度：图书分类',
                  left: 'center'
                },
                xAxis: {
                  type: 'category',
                  data: xAxis
                },
                yAxis: {
                  type: 'value'
                },
                series: [
                  {
                    data: yAxis,
                    type: 'line'
                  }
                ]
              };

              option && myChart.setOption(option);
     }  
  }
  
}
</script>
